'use client'

import { Image } from "@nextui-org/react"
import { useState } from "react"
import NextImage from "next/image";

export default function CardType({
    list,
    onChange=()=>{}
}){
    const [selected, setSelected] = useState(0)
    function handleChange(index){
        setSelected(index)
        onChange(list[index])
    }
    return <div className="card_type_container dark:bg-default background-100 px-[35px] py-[20px] grid grid-cols-8 gap-[27px]">
        {list.map((item, index)=>(
            <div 
                key={index}
                className={`card_type relative w-[160px] h-[64px] rounded-xl cursor-pointer ${selected === index ? 'active' : ''}
            `}
                onClick={()=>handleChange(index)}
            >
                <Image src={item.image} width={160} height={64} alt="cardType" as={NextImage} className="z-0"></Image>
                <div className="card_text absolute flex top-0 left-0 w-full h-full text-[#ffffff] justify-center items-center">{item.text}</div>
            </div>
        ))}
    </div>
}